<template>
	<view class="container" :style="appThemeStyle">
		<!-- 店铺页面组件 -->
		<!-- 轮播图 -->
		<!-- <Banner v-if="banneritem" :itemStyle="banneritem.style" :params="banneritem.params"
			:dataList="banneritem.data" /> -->
		<view class="swiper_div" style="height: 100vh;">
			<image mode="scaleToFill" class="slide-image" style="width: 100%;height: 100%;"
					src="/static/indexbg.png" @load="_imagesHeight"/>
			<!-- <swiper :autoplay="swiper_obj.autoplay" class="swiper-box" :duration="swiper_obj.duration" :circular="true"
				:interval="swiper_obj.interval * 1000" @change="_bindChange" style="width: 100vw;height: 100vh;">
				<swiper-item v-for="(dataItem, index) in swiper_obj.dataList" :key="index"
					style="width: 100vw;height: 100vh;">
					<image mode="scaleToFill" class="slide-image" style="width: 100%;height: 100%;"
						:src="dataItem.imgUrl" @load="_imagesHeight" />
				</swiper-item>
			</swiper> -->
		</view>
		<view class="div_box">
			<view class="div_box_flex">
				<view class="box_ul" @click="handleStory">
					<image class="img_s1" src="/static/index_3.png" mode="aspectFit"></image>
					<view class="box_pos_name1">
						<image class="img_s5" src="/static/index_7.png" mode="aspectFit"></image>
						<view class="box_ul_name1">
							采祁
						</view>
					</view>
				</view>
				<view class="box_ul pos_ul" @click="handleCha">
					<image class="img_s2" src="/static/index_2.png" mode="aspectFit"></image>
					<view class="box_ul_div">
						<image class="img_s4" src="/static/index_4.png" mode="aspectFit"></image>
						<view class="box_ul_name2">
							茶铺
						</view>
					</view>
				</view>
				<view class="box_ul" @click="openkefu">
					<image class="img_s3" src="/static/index_1.png" mode="aspectFit"></image>
					<view class="box_pos_name1">
						<image class="img_s5" src="/static/index_7.png" mode="aspectFit"></image>
						<view class="box_ul_name3">
							客服
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户隐私保护提示（仅微信小程序） -->
		<!-- #ifdef MP-WEIXIN -->
		<PrivacyPopup :hideTabBar="true" />
		<!-- #endif -->

		<Tabbar></Tabbar>

		<Kefu2 v-if="showLogModal" @getmsg='getsonmsg($event)'></Kefu2>
		<!-- <activ v-if="showActiv" @getmsg='closemsg($event)'></activ> -->
		<view v-if="showActiv" v-for="(dataItem, index) in swiper_obj.dataList" :key="index"
			style="width: 100vw;height: 100vh;">
			<image mode="scaleToFill" class="slide-image" style="width: 100%;height: 100%;"
				:src="dataItem.imgUrl" @load="_imagesHeight" />
		</view>
		

	</view>
</template>

<script>
	import {
		setCartTabBadge
	} from '@/core/app'
	import * as Api from '@/api/page'
	import Page from '@/components/page'
	import PrivacyPopup from '@/components/privacy-popup'
	import Banner from '@/components/page/diyComponents/banner'
	import Tabbar from '@/components/tab-bar/tab-bar'
	import Kefu2 from '@/components/kefu2/kefu2'
	// import activ from '@/components/activ/activ'

	const App = getApp()

	export default {
		components: {
			Page,
			PrivacyPopup,
			Banner,
			Tabbar,
			Kefu2,
			// activ
		},
		data() {
			return {
				// 页面参数
				options: {},
				// 页面属性
				page: {},
				// 页面元素
				items: [],
				banneritem: null,
				swiper_obj: {
					autoplay: false,
					duration: 500,
					interval: 2.5,
					dataList: [
						// {imgUrl: '/static/background/banner_d.png',link: null,},
					]
				},
				showLogModal: false,
				showActiv: false
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// 当前页面参数
			this.options = options
			// 加载页面数据
			this.getPageData()
		},

		/**
		 * 生命周期函数--监听页面显示
		 */
		onShow() {
			// 更新购物车角标
			setCartTabBadge()
			uni.hideTabBar({
				animation: false
			})
		},
		onTabItemTap() {
			console.log('点击2')
			//隐藏 tabBar
			uni.hideTabBar({
				animation: false
			})
		},
		mounted() {
			var that = this;
			uni.getStorage({
				key: 'Store',
				success: function(res) {
					console.log('aaab', res.data);
					var t_index_bg = res.data.storeInfo.index_bg;
					for (var i = 0; i < t_index_bg.length; i++) {
						var obj = {
							imgUrl: t_index_bg[i]['preview_url']
						}
						console.log(obj,'obj')
						console.log('url',t_index_bg[i]['preview_url'])
						that.swiper_obj.dataList.push(obj)
					}
				}
			});
		},
		methods: {

			/**
			 * 加载页面数据
			 * @param {Object} callback
			 */

			// 跳转到绑定手机号页面
			handleCha(e) {
				this.$navTo('pages/category/index')
			},
			handleStory(e) {
				this.$navTo('pages/user/story/index')
			},
			getPageData(callback) {
				const app = this
				const pageId = app.options.pageId || 0
				Api.detail(pageId)
					.then(result => {
						// 设置页面数据
						const {
							data: {
								pageData
							}
						} = result
						app.page = pageData.page
						app.items = pageData.items

						//获取轮播图信息
						for (var i = 0; i < pageData.items.length; i++) {
							if (pageData.items[i]['type'] == 'banner') {
								app.banneritem = pageData.items[i];
							}
						}
						console.log(app.banneritem)
						// 设置顶部导航栏栏
						app.setPageBar()
					})
					.finally(() => callback && callback())
			},

			/**
			 * 设置顶部导航栏
			 */
			setPageBar() {
				const {
					page
				} = this
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: page.params.title
				})
				// 设置navbar标题、颜色
				uni.setNavigationBarColor({
					frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
					backgroundColor: page.style.titleBackgroundColor
				})
			},
			openkefu() {
				this.showLogModal = true;
			},
			getsonmsg(res) { //res 就是接收子组件传递的参数
				console.log(res)
				this.showLogModal = res;
			},
			closemsg(res) { //res 就是接收子组件传递的参数
				console.log(res)
				this.showActiv= res;
			},
		},

		/**
		 * 下拉刷新
		 */
		onPullDownRefresh() {
			// 获取首页数据
			this.getPageData(() => {
				uni.stopPullDownRefresh()
			})
		},

		/**
		 * 分享当前页面
		 */
		onShareAppMessage() {
			const app = this
			const {
				page
			} = app
			return {
				// title: page.params.shareTitle,
				title: '采祁·食养生活馆',
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		},

		/**
		 * 分享到朋友圈
		 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
		 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
		 */
		onShareTimeline() {
			const app = this
			const {
				page
			} = app
			return {
				title: page.params.shareTitle,
				path: "/pages/index/index?" + app.$getShareUrlParams()
			}
		}

	}
</script>

<style lang="scss" scoped>
	.container {
		background: #fff;
		position: relative;
	}

	.div_box {
		position: absolute;
		bottom: 100rpx;
		left: 0rpx;
		right: 0rpx;
	}

	.div_box_flex {
		display: flex;
		justify-content: space-between;
	}

	.img_s1,
	.img_s3 {
		width: 183rpx;
		height: 183rpx;
	}

	.img_s2 {
		width: 275rpx;
		height: 275rpx;
	}

	.img_s4 {
		width: 152rpx;
		height: 55rpx;
	}

	.img_s5 {
		width: 100rpx;
		height: 35rpx;
	}


	.box_ul {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.pos_ul {
		position: relative;
		bottom: 100rpx;
	}

	.box_ul_name1,
	.box_ul_name3 {
		position: absolute;
		top: 0rpx;
		left: 0;
		right: 0;
		text-align: center;
		color: #EDF4D9;
		font-size: 24rpx;
	}

	.box_ul_name2 {
		// width: 120rpx;
		// height: 48rpx;
		position: absolute;
		top: 8rpx;
		left: 0;
		right: 0;
		text-align: center;
		color: #EDF4D9;
	}

	.box_ul_div {
		position: relative;
		height:55rpx;
	}

	.box_pos_name1 {
		height:35rpx;
		position: relative;
	}
</style>